<template>
    <div class="page-common-layout">
        <div class="page-common-content">
            <a-divider orientation="left"><span class="text-bold">{{ $ct("generalCheck", "其他组件校验") }}</span></a-divider>
            <a-form id="components-form-demo-validate-other" :form="form" v-bind="formItemLayout" @submit="handleSubmit">
                <a-form-item label="下拉框" has-feedback>
                    <a-select v-decorator="[
                        'select',
                        { rules: [{ required: true, message: '请选择你的城市' }] },
                    ]" placeholder="请选择">
                        <a-select-option value="ChangSha">
                            长沙
                        </a-select-option>
                        <a-select-option value="HuNan">
                            湖南
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="多选下拉框">
                    <a-select v-decorator="[
                        'select-multiple',
                        {
                            rules: [
                                { required: true, message: '请选择你喜欢的颜色', type: 'array' },
                            ],
                        },
                    ]" mode="multiple" placeholder="请选择你喜欢的颜色">
                        <a-select-option value="red">
                            Red
                        </a-select-option>
                        <a-select-option value="green">
                            Green
                        </a-select-option>
                        <a-select-option value="blue">
                            Blue
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="数字输入框">
                    <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="10" />
                </a-form-item>
                <a-form-item label="Switch开关">
                    <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
                </a-form-item>
                <a-form-item label="滑动器">
                    <a-slider v-decorator="['slider']" :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }" />
                </a-form-item>
                <a-form-item label="单选框">
                    <a-radio-group v-decorator="['单选框']">
                        <a-radio value="a">
                            item 1
                        </a-radio>
                        <a-radio value="b">
                            item 2
                        </a-radio>
                        <a-radio value="c">
                            item 3
                        </a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="单选框">
                    <a-radio-group v-decorator="['单选框']">
                        <a-radio-button value="a">
                            item 1
                        </a-radio-button>
                        <a-radio-button value="b">
                            item 2
                        </a-radio-button>
                        <a-radio-button value="c">
                            item 3
                        </a-radio-button>
                    </a-radio-group>
                </a-form-item>
                <a-form-item label="多选框">
                    <a-checkbox-group v-decorator="['多选框', { initialValue: ['A', 'B'] }]" style="width: 100%;">
                        <a-row>
                            <a-col :span="8">
                                <a-checkbox value="A">
                                    A
                                </a-checkbox>
                            </a-col>
                            <a-col :span="8">
                                <a-checkbox value="B">
                                    B
                                </a-checkbox>
                            </a-col>
                            <a-col :span="8">
                                <a-checkbox value="C">
                                    C
                                </a-checkbox>
                            </a-col>
                            <a-col :span="8">
                                <a-checkbox value="D">
                                    D
                                </a-checkbox>
                            </a-col>
                            <a-col :span="8">
                                <a-checkbox value="E">
                                    E
                                </a-checkbox>
                            </a-col>
                        </a-row>
                    </a-checkbox-group>
                </a-form-item>
                <a-form-item label="评分">
                    <a-rate v-decorator="['评分', { initialValue: 3.5 }]" allow-half />
                </a-form-item>
                <a-form-item label="文件上传">
                    <a-upload v-decorator="[
                        '文件上传',
                        {
                            valuePropName: 'fileList',
                            getValueFromEvent: normFile,
                        },
                    ]" name="logo" action="/upload.do" list-type="picture">
                        <a-button> <a-icon type="upload" /> 点击上传文件 </a-button>
                    </a-upload>
                </a-form-item>
                <a-form-item label="文件上传">
                    <div class="dropbox">
                        <a-upload-dragger v-decorator="[
                            '文件上传',
                            {
                                valuePropName: 'fileList',
                                getValueFromEvent: normFile,
                            },
                        ]" name="files" action="/upload.do">
                            <p class="ant-upload-drag-icon">
                                <a-icon type="inbox" />
                            </p>
                            <p class="ant-upload-text">
                                点击或者拖拽文件到框内进行上传
                            </p>
                            <p class="ant-upload-hint">
                                支持单次或批量上传
                            </p>
                        </a-upload-dragger>
                    </div>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
                    <a-button type="primary" html-type="submit">
                        提交校验
                    </a-button>
                    <span class="action-margin"></span>
                    <a-button @click="handleReset"><a-icon type="sync" />
                        重置表单
                    </a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script>
export default {
    data: () => ({
        formItemLayout: {
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
        },
    }),
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: 'validate_other' });
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                }
            });
        },
        normFile(e) {
            console.log('Upload event:', e);
            if (Array.isArray(e)) {
                return e;
            }
            return e && e.fileList;
        },
        handleReset() {
            this.form.resetFields();
        },
    },
};
</script>
<style>
#components-form-demo-validate-other .dropbox {
    height: 180px;
    line-height: 1.5;
}
</style>
